<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="../src/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../src/css/list.css">   
</head>

<body>
    <div id="head"></div>
    <div id="head1">
        <p>65%产品</p>
    </div>
    <div id="head2">
        <ul>
            <li>主题键盘</li>
            <li>桌垫/鼠标垫</li>
            <li>个性键帽</li>
            <li>配件</li>
        </ul>
    </div>
    <div class="center">
        <div class="list-left">
            <div class="left1">
                <div class="left1_1">
                    <p>布局类型</p>
                    <img src="../src/images/sy25.png" alt="">
                </div>
                <div class="left1_2">
                    <input type="checkbox">
                    <p>68键美式布局</p>
                </div>
            </div>
            <div class="left2">
                <div class="left2_1">
                    <p>外壳材质</p>
                    <img src="../src/images/sy25.png" alt="">
                </div>
                <div class="left2_2">
                    <input type="checkbox">
                    <p>塑料</p>
                </div>
                <div class="left2_3">
                    <input type="checkbox">
                    <p>金属</p>
                </div>
            </div>
            <div class="left3">
                <div class="left3_1">
                    <p>灯</p>
                    <img src="../src/images/sy25.png" alt="">
                </div>
                <div class="left3_2">
                    <input type="checkbox">
                    <p>无灯</p>
                </div>
                <div class="left3_3">
                    <input type="checkbox">
                    <p>单色LED下位</p>
                </div>
                <div class="left3_4">
                    <input type="checkbox">
                    <p>RGB灯</p>
                </div>
            </div>
            <div class="left4">
                <div class="left4_1">
                    <p>功能</p>
                    <img src="../src/images/sy25.png" alt="">
                </div>
                <div class="left4_2">
                    <input type="checkbox">
                    <p>MY-有线</p>
                </div>
                <div class="left4_3">
                    <input type="checkbox">
                    <p>MYD-双模</p>
                </div>
            </div>
            <button class="left5">重置选项</button>
        </div>
        <div class="list_right">
            <ul class="list">
                <!-- <li>
                    <div class="li1"><img src="../src/images/sy26.png" alt=""></div>
                    <div class="li2">
                        <p>Sword68CMYK</p>
                    </div>
                    <div class="li3">
                        <p class="p1">型号</p>
                        <p class="p2">Sword68</p>
                    </div>
                    <div class="li4">
                        <p class="p1">印字方式</p>
                        <p class="p2">热升华正刻</p>
                    </div>
                    <div class="li5">
                        <a href="./detail.html">了解|购买</a>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
    <div id="pagation"></div>
</body>
<script src="../src/lib/jquery-1.11.3.js"></script>
<script src="../src/lib/layui/layui.js"></script>
<script src="../src/js/list.js" type="module"></script>

</html>